<template>
  <view
    class="wrapper"
    :style="specialStyle"
    @touchstart="$emit('closeBubble')"
  >
    <view class="majorFilterContainer">
      <view class="filter-box">
        <view
          v-if="!hideFilters"
          class="matching-degree"
          @click="showPicker('showMatchingDegree')"
          >{{ currentMatchingDegree }}</view
        >
        <view
          v-if="!hideFilters"
          class="education-background"
          @click="showPicker('showEducationBackground')"
          >{{ currentEducationBackground }}</view
        >
        <view class="search-major" :class="{ expanded: hideFilters }">
          <img :src="fdj" class="fdj" />
          <input
            type="text"
            v-model="matchName"
            placeholder="查高校"
            @focus="handleFocus"
            @blur="handleBlur"
          />
        </view>
      </view>
      <view v-if="showEducationBackground" class="school-mask">
        <view class="school-filter">
          <view class="filter-first">
            <view class="title">办学层次</view>
            <view class="choose-box">
              <view
                :class="
                  schoolRunningLevelIndexList.includes(index)
                    ? 'box-item-active'
                    : 'box-item'
                "
                v-for="(item, index) in schoolRunningLevelList"
                :key="index"
                @click="chooseSchoolRunningLevel(item, index)"
                >{{ item.label }}</view
              >
            </view>
            <view class="title">办学类型</view>
            <view class="choose-box">
              <view
                :class="
                  schoolRunningTypeIndexList.includes(index)
                    ? 'box-item-active'
                    : 'box-item'
                "
                v-for="(item, index) in schoolRunningTypeList"
                :key="index"
                @click="chooseSchoolRunningType(item, index)"
                >{{ item.label }}</view
              >
            </view>
            <view class="title">院校特色</view>
            <view class="choose-box">
              <view
                :class="
                  schoolFeatureIndexList.includes(index)
                    ? 'box-item-active'
                    : 'box-item'
                "
                v-for="(item, index) in schoolFeatureList"
                :key="index"
                @click="chooseSchoolFeature(item, index)"
                >{{ item.label }}</view
              >
            </view>
            <view class="title">院校类型</view>
            <view class="choose-box">
              <view
                :class="
                  schoolTypeIndexList.includes(index)
                    ? 'box-item-active'
                    : 'box-item'
                "
                v-for="(item, index) in schoolTypeList"
                :key="index"
                @click="chooseSchoolType(item, index)"
                >{{ item.label }}</view
              >
            </view>
          </view>
          <view class="filter-second">
            <view class="left-btn" @click="reset">重置</view>
            <view class="right-btn" @click="search">确定</view>
          </view>
        </view>
      </view>
      <view class="top-label">
        <view class="first">院校</view>
        <view class="second">专业匹配</view>
        <view class="third">匹配率</view>
      </view>
      <scroll-view
        scroll-y="true"
        @scroll="onScroll"
        @scrolltolower="onScrollToLower"
        class="schoolListContainer"
        v-if="schoolList.length > 0"
      >
        <view class="line"></view>
        <view
          v-for="(item, index) in schoolList"
          :key="index"
          class="school-info"
          @click="gotoSchool(item)"
        >
          <view class="left">
            <image class="avatar" mode="aspectFill" :src="item.icon" />
          </view>
          <view class="right">
            <view class="name">{{ item.name }}</view>
            <view class="tags">
              <!-- <view v-if="item.levelName">
                <view
                  v-for="(_item, _index) in item.levelName.split(',')"
                  :key="_index"
                  >{{ _item }}</view
                >
              </view> -->
              <view v-if="item.dualClassName"
                ><view
                  v-for="(_item, _index) in item.dualClassName
                    .split(',')
                    .slice(0, 3)"
                  :key="_index"
                  >{{ _item }}</view
                ></view
              >
              <!-- <view v-if="item.natureName"
                ><view
                  v-for="(_item, _index) in item.natureName.split(',')"
                  :key="_index"
                  >{{ _item }}</view
                ></view
              >
              <view v-if="item.collegeType"
                ><view
                  v-for="(_item, _index) in item.collegeType.split(',')"
                  :key="_index"
                  >{{ _item }}</view
                ></view
              > -->
            </view>
            <view class="position"
              >{{ item.provinceName }} · {{ item.cityName }}</view
            >
          </view>
          <view class="major-number">{{ item.professionNum }}</view>
          <view class="percent">
            <view class="circle-progress">{{ item.score }}%</view>
          </view>
          <view
            v-if="index != schoolList.length - 1"
            class="bottom-line"
          ></view>
        </view>
        <u-loadmore
          v-if="schoolList.length > 9"
          :status="status"
          :icon-type="iconType"
          :load-text="loadText"
        />
      </scroll-view>
      <Empty
        v-if="schoolList.length === 0"
        :baseImg="emptyImg"
        text="暂无数据"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
    </view>
    <!-- 省份城市选择器 -->
    <u-select
      v-model="showMatchingDegree"
      mode="mutil-column-auto"
      :list="customRegionData"
      @confirm="handleMatchingDegreeConfirm($event, item)"
    ></u-select>
  </view>
</template>

<script>
import { customRegionData } from "../utils/regionData.js";

import { getCollegeList } from "@/api/modules/gk";

import { positionTagColleges } from "@/api/modules/career";
import { getRegionList } from "@/api/modules/positionDictionary";
import Empty from "@/components/Empty.vue";
export default {
  name: "majorFilterList",
  props: {
    cateType: {
      type: String,
      default: "30",
    },
    specialStyle: {
      type: Object,
      default: () => {},
    },
    subjectCombination: {
      type: String,
      default: "",
    },
    currentSubject: {
      type: String,
      default: "",
    },
  },
  components: {
    Empty,
  },
  watch: {
    // 监听 subjectCombination 的变化
    subjectCombination(newVal, oldVal) {
      if (newVal !== oldVal) {
        console.log("这里数据发生了变化");
        this.pageNo = 1;
        this.schoolList = [];
        this.getCollegeListFn();
      }
    },
  },
  data() {
    return {
      fdj: "https://img3.job1001.com/ypMp/elan/images/saas/fdj.png",
      pageNo: 1,
      regionId: "",
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "上拉加载更多...",
        loading: "加载中",
        nomore: "没有更多啦",
      },
      customRegionData,
      schoolRunningLevelList: [
        {
          label: "普通本科",
          value: "普通本科",
        },
        {
          label: "专科（高职）",
          value: "专科（高职）",
        },
      ],
      schoolRunningLevelValueList: [],
      schoolRunningLevelIndexList: [],
      schoolRunningTypeList: [
        {
          label: "公办",
          value: "公办",
        },
        {
          label: "民办",
          value: "民办",
        },
        {
          label: "中外合作办学",
          value: "中外合作办学",
        },
        {
          label: "内地与港澳台地区合作办学",
          value: "内地与港澳台地区合作办学",
        },
      ],
      schoolRunningTypeValueList: [],
      schoolRunningTypeIndexList: [],
      schoolFeatureList: [
        {
          label: "985",
          value: "985",
        },
        {
          label: "211",
          value: "211",
        },
        {
          label: "双一流",
          value: "双一流",
        },
        {
          label: "保研资格",
          value: "保研资格",
        },
        {
          label: "教育部直属",
          value: "教育部直属",
        },
        {
          label: "中央部委",
          value: "中央部委",
        },
        {
          label: "强基计划",
          value: "强基计划",
        },
        {
          label: "双高计划",
          value: "双高计划",
        },
        {
          label: "国际本科",
          value: "国际本科",
        },
      ],
      schoolFeatureValueList: [],
      schoolFeatureIndexList: [],
      schoolTypeList: [
        {
          label: "综合",
          value: "综合",
        },
        {
          label: "理工",
          value: "理工",
        },
        {
          label: "农林",
          value: "农林",
        },
        {
          label: "医药",
          value: "医药",
        },
        {
          label: "师范",
          value: "师范",
        },
        {
          label: "语言",
          value: "语言",
        },
        {
          label: "财经",
          value: "财经",
        },
        {
          label: "政法",
          value: "政法",
        },
        {
          label: "体育",
          value: "体育",
        },
        {
          label: "艺术",
          value: "艺术",
        },
        {
          label: "民族",
          value: "民族",
        },
        {
          label: "军事",
          value: "军事",
        },
        {
          label: "其他",
          value: "其他",
        },
      ],
      schoolTypeValueList: [],
      schoolTypeIndexList: [],
      rangKey: "name",
      defaultRegion: ["广东省", "深圳市", "宝安区"],
      schoolList: [],
      areaList: [
        {
          province: "广东省",
          city: ["广州市", "深圳市", "珠海市", "汕头市"],
        },
        {
          province: "云南省",
          city: ["昆明市", "曲靖市", "玉溪市", "保山市"],
        },
        // 更多省份...
      ],
      areaListKey: ["province", "city"],
      // customRegionData: [
      //   {
      //     value: 2,
      //     label: '广东',
      //     children: [
      //       {
      //         value: 3,
      //         label: '深圳'
      //       },
      //       {
      //         value: 4,
      //         label: '广州'
      //       }
      //     ]
      //   },
      //   {
      //     value: 5,
      //     label: '广西',
      //     children: [
      //       {
      //         value: 6,
      //         label: '南宁'
      //       },
      //       {
      //         value: 7,
      //         label: '桂林'
      //       }
      //     ]
      //   }
      // ],

      hideFilters: false, // 控制筛选条件的显示
      loading: false,
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      currentMatchingDegree: "院校位置",
      currentMatchingDegreeValue: "",
      currentEducationBackground: "院校层次",
      currentEducationBackgroundValue: "30",
      matchName: "",
      showMatchingDegree: false,
      showEducationBackground: false,
      matchingDegreeSelector: [
        {
          cateName: "全部",
          id: "",
        },
        {
          cateName: "低",
          id: "10",
        },
        {
          cateName: "中",
          id: "20",
        },
        {
          cateName: "高",
          id: "30",
        },
      ],
      educationBackgroundSelector: [
        {
          cateName: "专科",
          id: "10",
        },
        {
          cateName: "本科",
          id: "30",
        },
      ],
      majorFirstList: ["清华大学"],
    };
  },
  methods: {
    onScroll(e) {},
    onScrollToLower() {
      console.log("gundongdao1dil");
      this.pageNo += 1;
      this.getCollegeListFn();
    },
    async getCollegeListFn() {
      this.loading = true;
      const params = {
        matchName: this.matchName,
        subjectCombination: this.subjectCombination,
        levelName: this.schoolRunningLevelValueList.toString(),
        dualClassName: this.schoolFeatureValueList.toString(),
        natureName: this.schoolRunningTypeValueList.toString(),
        collegeType: this.schoolTypeValueList.toString(),
        regionId: this.regionId,
        pageNo: this.pageNo,
        pageSize: 10,
      };
      const res = await getCollegeList(params);
      this.loading = false;
      if (res.code == 200) {
        console.log("res.data", res.data);
        if (res.data.length == 0) {
          this.status = "nomore";
        }
        if (this.schoolList == []) {
          this.schoolList = res.data;
          console.log("this.schoolList", this.schoolList);
        } else {
          this.schoolList.push(...res.data);
        }
        // this.schoolList = res.data;
        console.log("this.schoolList", this.schoolList);
      }
    },
    gotoSchool(item) {
      const { collegeId } = item;
      uni.navigateTo({
        url: `/pagesSub/nationalCollegeEntranceExamination/campusMatchDetail/index?collegeId=${collegeId}&subjectCombination=${this.subjectCombination}&currentSubject=${this.currentSubject}`,
      });
    },
    reset() {
      this.schoolRunningLevelValueList = [];
      this.schoolRunningLevelIndexList = [];
      this.schoolRunningTypeValueList = [];
      this.schoolRunningTypeIndexList = [];
      this.schoolFeatureValueList = [];
      this.schoolFeatureIndexList = [];
      this.schoolTypeValueList = [];
      this.schoolTypeIndexList = [];
    },
    search() {
      this.pageNo = 1;
      this.schoolList = [];
      this.getCollegeListFn();
      this.showEducationBackground = false;
      this.reset();
    },
    chooseSchoolRunningLevel(item, index) {
      if (this.schoolRunningLevelIndexList.includes(index)) {
        this.schoolRunningLevelIndexList =
          this.schoolRunningLevelIndexList.filter((ele) => ele !== index); // 删除元素 'c'
        this.schoolRunningLevelValueList =
          this.schoolRunningLevelValueList.filter(
            (_ele) => _ele !== item.value
          );
      } else {
        this.schoolRunningLevelIndexList.push(index);
        this.schoolRunningLevelValueList.push(item.value);
      }
    },
    chooseSchoolRunningType(item, index) {
      if (this.schoolRunningTypeIndexList.includes(index)) {
        this.schoolRunningTypeIndexList =
          this.schoolRunningTypeIndexList.filter((ele) => ele !== index); // 删除元素 'c'
        this.schoolRunningTypeValueList =
          this.schoolRunningTypeValueList.filter((_ele) => _ele !== item.value);
      } else {
        this.schoolRunningTypeIndexList.push(index);
        this.schoolRunningTypeValueList.push(item.value);
      }
    },
    chooseSchoolFeature(item, index) {
      if (this.schoolFeatureIndexList.includes(index)) {
        this.schoolFeatureIndexList = this.schoolFeatureIndexList.filter(
          (ele) => ele !== index
        ); // 删除元素 'c'
        this.schoolFeatureValueList = this.schoolFeatureValueList.filter(
          (_ele) => _ele !== item.value
        );
      } else {
        this.schoolFeatureIndexList.push(index);
        this.schoolFeatureValueList.push(item.value);
      }
    },
    chooseSchoolType(item, index) {
      if (this.schoolTypeIndexList.includes(index)) {
        this.schoolTypeIndexList = this.schoolTypeIndexList.filter(
          (ele) => ele !== index
        ); // 删除元素 'c'
        this.schoolTypeValueList = this.schoolTypeValueList.filter(
          (_ele) => _ele !== item.value
        );
      } else {
        this.schoolTypeIndexList.push(index);
        this.schoolTypeValueList.push(item.value);
      }
    },
    getRegionList() {
      getRegionList({}).then((res) => {
        if (res.code == 200) {
          res.data.unshift({ label: "全部", value: "100000" });
          this.regionList = res.data;
          this.currentRegion = res.data[0];
          this.regionConfirm([0]);
        }
      });
    },
    handleFocus() {
      this.hideFilters = true; // 隐藏左侧筛选条件
      this.showEducationBackground = false;

      // 添加宽度变化的过渡动画
      // 你可以在这里调整动画效果
    },
    handleBlur() {
      this.hideFilters = false; // 显示左侧筛选条件
      this.pageNo = 1;
      this.schoolList = [];
      this.getCollegeListFn();
    },

    handleMatchingDegreeConfirm(e, item) {
      console.log("eitem", e, item);
      this.regionId = e[1].value.toString();
      this.currentMatchingDegree = e[1].label;
      this.pageNo = 1;
      this.schoolList = [];
      this.getCollegeListFn();

      // e[0]就是索引
      // this.currentMatchingDegree = this.matchingDegreeSelector[e[0]].cateName;
      // this.currentMatchingDegreeValue = this.matchingDegreeSelector[e[0]].id;
    },
    handleEducationBackgroundConfirm(e, item) {
      // e[0]就是索引
      // this.currentEducationBackground =
      //   this.educationBackgroundSelector[e[0]].cateName;
      // this.currentEducationBackgroundValue =
      //   this.educationBackgroundSelector[e[0]].id;
    },
    showPicker(params) {
      switch (params) {
        case "showMatchingDegree":
          this.showMatchingDegree = true; // 这里可以根据需要调整
          this.showEducationBackground = false;
          break;
        case "showEducationBackground":
          this.showEducationBackground = !this.showEducationBackground;
          break;
        default:
          break;
      }
    },
  },
  created() {
    this.pageNo = 1;
    this.schoolList = [];
    this.getCollegeListFn();
  },
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + "careerPath/";
.wrapper {
  width: 100vw;
  min-height: 400rpx;
  overflow: hidden;
  .majorFilterContainer {
  }
  .filter-box {
    height: 110rpx;
    width: 100%;
    padding: 14rpx 32rpx 32rpx 32rpx;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: padding 0.3s ease; // 添加过渡动画
    .matching-degree,
    .education-background {
      margin-right: 16rpx;
      width: 158rpx;
      height: 56rpx;
      background: #f6f6f6;
      border-radius: 12rpx;
      position: relative; /* 确保伪元素相对于这个元素定位 */
      display: inline-flex; /* 使元素适应内容 */
      flex-direction: row;
      align-items: center;
      padding: 4rpx 16rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #888888;
      transition: opacity 0.3s ease; // 添加过渡动画
      &::after {
        content: ""; /* 必须设置内容 */
        position: absolute; /* 绝对定位 */
        bottom: 20rpx; /* 底部对齐 */
        right: 16rpx; /* 右侧对齐 */
        width: 0; /* 宽度为0 */
        height: 0; /* 高度为0 */
        border-width: 10rpx; /* 三角形的大小 */
        border-style: solid; /* 边框样式 */
        border-color: transparent transparent transparent #c0c0c0; /* 三角形颜色，左下角为 #c0c0c0 */
        transform-origin: 0 100%; /* 设置旋转中心点 */
        transform: rotate(45deg); /* 沿 X 轴旋转 -45 度 */
      }
    }
    .search-major {
      width: 336rpx;
      height: 56rpx;
      background: #f6f6f6;
      border-radius: 12rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #888888;
      display: flex; /* 使元素适应内容 */
      flex-direction: row;
      align-items: center;
      padding: 4rpx 16rpx;
      transition: width 0.3s ease; // 添加过渡动画
      flex: 1; // 使用 Flex 布局
      .fdj {
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
      }
      &.expanded {
        width: 100%;
      }
    }
  }
  .school-mask {
    width: 100vw;
    height: 90vh;
    background: rgba(0, 0, 0, 0.45);
    .school-filter {
      position: absolute;
      width: 100%;
      overflow: scroll;
      background: #ffffff;
      padding: 0 32rpx 32rpx 32rpx;
      z-index: 999;
      .filter-first {
        height: 764rpx;
        overflow: scroll;
        .title {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #222222;
          margin: 10rpx 0;
        }
        .choose-box {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: center;
          .box-item,
          .box-item-active {
            width: 30%;
            height: 68rpx;
            background: #f6f6f6;
            border-radius: 8rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 4rpx 16rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #888888;
            margin: 0 16rpx 16rpx 0;
          }
          .box-item {
            color: #888888;
          }
          .box-item-active {
            color: #f65b3c;
          }
        }
      }
      .filter-second {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 40rpx;
        .left-btn,
        .right-btn {
          width: 330rpx;
          height: 80rpx;
          border-radius: 8rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          font-size: 30rpx;
        }
        .left-btn {
          background: #f7f7f7;
          color: #555555;
          margin-right: 18rpx;
        }
        .right-btn {
          background: #f75a3e;
          color: #ffffff;
        }
      }
    }
  }
  .top-label {
    padding: 0rpx 32rpx 32rpx 32rpx;

    display: flex;
    flex-direction: row;
    align-items: center;
    height: 60rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    .first {
      flex: 1;
      padding-left: 100rpx;
    }
    .second,
    .third {
      width: 130rpx;
      text-align: right;
      padding-right: 20rpx;
    }
  }
  .schoolListContainer {
    padding: 0rpx 32rpx 32rpx 32rpx;
    height: calc(100vh - 650rpx);
    overflow: scroll;
    width: calc(100% - 64rpx);
    padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
    .top-label {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 100rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      .first {
        flex: 1;
        padding-left: 100rpx;
      }
      .second,
      .third {
        width: 130rpx;
        text-align: right;
        padding-right: 20rpx;
      }
    }
    .line {
      width: 100%;
      height: 2rpx;
      background-color: #d8d8d8;
    }
    .school-info {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 36rpx;
      position: relative;
      height: 180rpx;

      &:last-child {
        margin-bottom: 72rpx;
      }

      .left {
        width: 88rpx;
        height: 88rpx;
        margin-right: 16rpx;

        .avatar {
          width: 88rpx;
          height: 88rpx;
        }
      }

      .right {
        flex: 1;
        height: 140rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .name {
          font-weight: 600;
          font-size: 30rpx;
          color: #333333;
        }

        .tags {
          width: 100%;
          overflow: hidden;
          margin-top: 8rpx;
          margin-right: 8rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-wrap: wrap;
          view {
            display: flex;
            align-items: center;
            justify-content: center;
            view {
              display: flex;
              align-items: center;
              justify-content: center;
              // width: 83rpx;
              height: 32rpx;
              border-radius: 4rpx;
              border: 2rpx solid #cbcbcb;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 22rpx;
              color: #666660;
              margin-right: 8rpx;
              padding: 2rpx 8rpx 4rpx 10rpx;
            }
          }
        }
        .position {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999990;
        }
      }
      .major-number {
        width: 130rpx;
        text-align: right;
        padding-right: 48rpx;
        color: #ffbb68;
        font-size: 46rpx;
      }
      .percent {
        width: 130rpx;
        .circle-progress {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          color: #333333;
          font-family: "AlimamaShuHeiTi-Bold";
          font-size: 26rpx;
          border: 8rpx solid #f7f7f7;
        }
      }
      .bottom-line {
        position: absolute;
        width: 80%;
        height: 2rpx;
        background-color: #f5f5f5;
        bottom: 0;
      }
    }
  }
}
.empty {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.u-tab-item {
  border: none;
  background: #f5f5f5;
}
</style>
